<template>
  <el-dialog title="上传脚本" :visible.sync="visible" :before-close="handleClose" width="50%">
    <el-row>
      <el-col :span="16">
        <!-- 这里面的data可以用来传递额外参数，uploadParams = {'key':'value', 'key':'value'} -->
        <el-upload
          class="upload-demo"
          action="no-use"
          name="file"
          :data="uploadParams"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3000"
          :on-exceed="handleExceed"
          :on-success="resourceUploadSuccess"
          :on-error="resourceUploadError"
          :on-change="fileChangeHandle"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary" :loading="butLoading" @click="fileList = [], percentage = 0">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" :loading="butLoading" @click="myUpload()">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">可以在这里上传脚本和相关的资源文件，如：excel、csv等</div>
        </el-upload>
      </el-col>
      <el-col :span="8"><el-progress type="circle" :percentage="percentage" /></el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { myUpload, uploadProcess, clearProcess } from '@/api/perf/script.js'
export default {
  data() {
    return {
      visible: false,
      // 上传控件使用
      uploadParams: {},
      fileList: [],
      uploadId: null,
      percentage: 0,
      timer: null,
      butLoading: false
    }
  },
  methods: {
    init() {
      this.visible = true
      this.uploadId = new Date().getTime()
    },
    // upload的一些方法
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    resourceUploadSuccess(response) {
      this.$message(response.message)
    },
    resourceUploadError(response) {
      this.$message(response)
    },
    fileChangeHandle(file, fileList) {
      this.fileList = fileList
    },
    myUpload() {
      this.butLoading = true
      const formData = new FormData()
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append('file_' + i, this.fileList[i].raw)
      }
      this.reflushProcess()
      myUpload(this.uploadId, formData).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
        } else {
          this.$message.error(respnose.message)
          this.stopReflush()
        }
        this.butLoading = false
      })
    },
    reflushProcess() {
      // 这里用that，要不在setInterval中访问不到this
      const that = this
      // this.stopReflush()
      this.timer = setInterval(function() {
        uploadProcess(that.uploadId).then(respnose => {
          if (respnose && respnose.code === 200) {
            const { data } = respnose
            that.percentage = data.percent
            console.info(that.percentage)
            if (that.percentage >= 100) {
              that.stopReflush()
            }
          } else {
            that.$message.error(respnose.message)
          }
        })
      }, 1000)
    },
    stopReflush() {
      clearInterval(this.timer)
      clearProcess(this.uploadId).then(respnose => {
        if (respnose && respnose.code !== 200) {
          this.$message.error(respnose.message)
        }
      })
    },
    handleClose(done) {
      this.stopReflush()
      done()
      this.$emit('refreshDataList')
    }
  }
}
</script>

<style>
</style>
